<template>
  <el-form :model="form" label-width="120px" ref="form">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="姓名:">
          <span>{{ form.name }}</span>
        </el-form-item>
      </el-col>

      <el-form-item>
        <div class="select-older-button">
          <el-button type="primary" @click="putawayVisible = true"
            >选择老人</el-button
          >
        </div>
      </el-form-item>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="来访日期">
          <el-date-picker
            v-model="form.lfTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="来访人" label-width="100px">
          <el-input v-model="form.lfName" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="来访人电话" label-width="100px">
          <el-input v-model="form.lfTel" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="来访人身份证" label-width="100px">
          <el-input v-model="form.lfIdentity" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="关系" label-width="100px">
          <el-select v-model="form.lfgxDictId" placeholder="请选择">
            <el-option
              v-for="dict in dicts"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="来访人数" label-width="100px">
          <el-input-number
            v-model="form.lfNums"
            :min="1"
            :max="10"
            :step="1"
          ></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="来访状态" label-width="100px" prop="jdPersonId">
          <el-select v-model="form.lfstatus" placeholder="请选择">
            <el-option label="待来访" value="0"></el-option>
            <el-option label="已完成来访" value="1"></el-option>
            <el-option label="探视中" value="2"></el-option>
            <el-option label="来访失败" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="备注" label-width="100px">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <div>
        <el-button type="primary" @click="back">返回</el-button>
      </div>
      <div class="right-align">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-form-item>
    <el-dialog
      :visible.sync="putawayVisible"
      title="选择老人"
      :append-to-body="true"
    >
      <el-row :gutter="20">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="userNum" label="档案编号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="gender" label="性别">
            <template slot-scope="scope">
              <span>{{ scope.row.status === 0 ? "女" : "男" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="createTime" label="建档时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="selectOlder(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="8">
          <!-- 放分页部分 -->
          <el-pagination
            background
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :current-page="pageNum"
            layout="total, sizes, prev, pager, next"
            @next-click="nextPage"
            @prev-click="prevPage"
            @size-change="sizeChange"
            @current-change="currentPage"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-dialog>
  </el-form>
</template>
    
    <script>
export default {
  data() {
    return {
      form: {
        name: "",
        userId: "",
        lfTime: "",
        lfName: "",
        lfTel: "",
        lfIdentity: "",
        lfgxDictId: "",
        lfNums: 1, // 将 lfNum 的初始值设置为 1
        lfstatus: "",
        remark: "",
      },
      pageNum: 1,
      pageSize: 5,
      total: 0,
      dicts: [],
      tableData: [],
      putawayVisible: false,
      form: {},
    };
  },
  methods: {
    queryLfgxDictId() {
      this.$axios.get("api/dict/queryDict/" + 1).then((res) => {
        if (res.data.code == 200) {
          this.dicts = res.data.data;
        }
      });
    },
    back() {
      this.$router.push({ path: "/lfRegister" });
    },
    selectOlder(val) {
      this.form = {};
      this.form.name = val.name;
      this.form.userId = val.id;

      this.putawayVisible = false;
    },

    queryOlder() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      let orderParam = {};
      orderParam.status = 1;
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = orderParam;
      this.$axios.post("api/userOut/queryOlder", pageParam).then((res) => {
        if (res.data.code == 200) {
          let pageData = res.data.data;

          this.tableData = pageData.list;
          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;
        }
      });
    },
    submitForm() {
  
        this.$axios.post("api/register/addLf", this.form).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("添加成功!");
            this.$router.push({ path: "/lfRegister" });
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },

    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryUser();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryUser();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryUser();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryUser();
    },
    queryCondition() {
      thispageNum = 1;
      this.queryUser();
    },
  },
  created() {
    this.queryOlder();
    this.queryLfgxDictId();
  },
};
</script>
    
  <style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.avatar {
  width: 120px; /* 调整为你需要的宽度 */
  height: 120px; /* 调整为你需要的高度 */
  object-fit: cover; /* 这条语句会使图片以 "cover" 模式显示，保持图片的本身比例长宽比，裁剪超出部分 */
}
.urgent-message {
  background-color: #cfe8ff; /* 淡蓝色背景 */
  color: #1890ff; /* 蓝色字体颜色 */
  padding: 10px;
  border: 1px solid #91d5ff; /* 淡蓝色边框 */
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.info-icon {
  color: #1890ff; /* 蓝色图标颜色 */
  margin-right: 10px;
}

.message-text {
  font-weight: bold; /* 加粗字体 */
}

.right-align {
  text-align: right; /* 将内容右对齐 */
}

.blue-vertical-line {
  border-left: 3px solid blue; /* 设置竖线宽度和颜色 */
  height: 15px; /* 设置竖线高度，根据你的需要调整 */
  margin-right: 10px; /* 可选：设置竖线右边距，根据你的需要调整 */
}

.select-older-button {
  text-align: left; /* 将按钮左对齐 */
}
</style>